<template>
  <div>
    <div class="hello_con">
      <img class="shop_img" src="../assets/shop.jpg" @click="show = true"/>
      <span class="shop_text">妙脆角</span>
      <div class="shop">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三维立体膨化食品是2000年以来在国内面世的一种全新的膨化食品。按所使用的原料不同又可分为马铃薯三维立体膨化食品和谷物三维立体膨化食品，尤其是谷物三维立体膨化食品还以成本低廉
        而更具市场优势。三维立体膨化食品的外观不循窠臼，一改传统膨化食品扁平且缺乏变化的单一模样，采用全新的生产工艺，使生产出的产品外形变化多样、立体感强，并且组织细腻、口感酥脆.
      </div>
    </div>
    <van-divider/>
    <div class="hello_con">
      <img class="shop_img" src="../assets/kl.jpg" @click="show2 = true"/>
      <span class="shop_text">夏日服饰搭配</span>
      <div class="shop">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;组炎热的夏季让很多爱美的女士又是欢喜又是忧愁。为什么呢!原因当然有很多种了奥！首先，夏天一到各式各样的服装，各种各样的颜色以及各
        种各样的款式都是惹人喜爱的，尤其是很多美眉的工作就繁忙了。大家开始逛街，开始挑选自己喜欢的衣服还有鞋子，以及自己最爱的包包等等。但是，夏天一到有那么多的好看衣服大家应该高兴还来不及啊为什么有的高兴有的伤心呢?
      </div>
    </div>
    <div class="contontrr">
      <van-overlay :show="show">
        <div class="wrapper" @click="show = false">
          <div class="block">
            <h1>不能套在手指上的妙脆角，不能叫做真正的妙脆角！</h1>
            <img class="shop_img" src="../assets/shop.jpg" @click="show = true"/>
            <div class="shop_text2"><span>妙脆角</span><span
              class="shop_text3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2009-02-13</span></div>
            <br><br>
            <p>&nbsp;&nbsp;不知道是童年的哪一年，妙脆角忽然就风靡了起来...现在想来，这也算是一个奇特的零食了，因为吃的时候，真的就特别具有仪式感了...绝对是被广告影响的，
              要一个个的套在十个手指上，然后咔嚓、咔嚓一气儿的吃完，吃完还要舔舔手指头，嘬干净了味道，才是一个完美的 ending！</p><br>
            <img class="img_con" src="../assets/1.jpg"/><br>
            <p>&nbsp;&nbsp;到了 9102 年，刘星，哦不，是张一山，还在做这个动作…</p><br>
            <img class="img_con" src="../assets/2.gif"/><br>
            <p>&nbsp;&nbsp;魔性是真魔性，虽然有点中二，但我早已被妙脆角的广告从里到外的地塑造出了「吃妙脆角一定要把它套在手指上」的印象。</p><br>
            <h2>等等！小编还有话说</h2><br>
            <p>&nbsp;&nbsp;写这篇「妙脆角」的时候，我反复提了好几次「好多鱼」...因为它俩的制作真的很近似，也都是立体膨化食品，在查好多鱼的时候，
              发现流水线都是同一款的，只是换了下辊压成型的模具...</p><br>
            <img class="img_con" src="../assets/3.jpg"/>
          </div>
        </div>
      </van-overlay>
    </div>

    <div class="contontrr">
      <van-overlay :show="show2">
        <div class="wrapper" @click="show2 = false">
          <div class="block">
            <h1>夏日服饰搭配的心情随笔！</h1>
            <img class="shop_img" src="../assets/kl.jpg" @click="show2 = true"/>
            <div class="shop_text2"><span>北京服饰</span><span
              class="shop_text3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2012-03-05</span></div>
            <br><br>
            <img class="img_con" src="../assets/close.jpg"/><br>

            <p>&nbsp;&nbsp;　　炎热的夏季让很多爱美的女士又是欢喜又是忧愁。为什么呢!原因当然有很多种了奥！首先，夏天一到各式各样的服装，
              各种各样的颜色以及各种各样的款式都是惹人喜爱的，尤其是很多美眉的工作就繁忙了。大家开始逛街，开始挑选自己喜欢的衣服还有鞋子，
              以及自己最爱的包包等等。但是，夏天一到有那么多的好看衣服大家应该高兴还来不及啊为什么有的高兴有的伤心呢?
            </p>
            <p>&nbsp;&nbsp; 现在这个社会讲究的是以瘦为美，那么，对于那些胖胖的美眉来说就是一件麻烦事，夏天一到，穿的衣服就会少了，
              自己身上的那些赘肉全部暴漏出来了，所以自己就会比较犹豫。而对于那些身材好的女性朋友就是他们喜欢的季节，
              既可以展示自己的好身材，而且还有很多漂亮的衣服穿。最关键的一点就是我要告诉大家的一点，夏天最好选一些颜色清凉的衣服，
              这样看上去机会比较舒心，对于有赘肉的女生，我个人认为还是穿一些连体的服饰，有助于遮挡赘肉奥！以上就是我对于夏季服饰搭配的
              心情随笔！(人生格言大全 www.wenzhangba.com)</p><br>
          </div>
        </div>
      </van-overlay>
    </div>

  </div>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      show: false,
      show2:false
    }
  }
}
</script>

<style scoped>
.hello_con {
  width: 7rem;
  height: 3.7rem;
  border: 1px black;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #F0FFFF;
}

.hello_con::after {
  content: "...";
  position: absolute;
  bottom: 0.2rem;
  right: 0.3rem;
  padding-left: 40px;
}

.shop_img {
  margin: 0.2rem 0 0 0.2rem;
  width: 1rem;
  border: 1px black solid;
  border-radius: 0.5rem;

}

.koo {
  vertical-align: middle;

}

.shop_text {
  line-height: 9px;
  font-size: 0.5rem;
}

.shop {
  width: 6.5rem;
  line-height: 0.6rem;
  border-top: 1px #cccccc solid;
  text-align: center;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color: #fff;
  lock-scroll: false;
}

.block {
  position: fixed;
  top: 2rem;
  left: 2.5rem;
  width: 6.7rem;
  height: 13.8rem;
  color: black;
  font-size: 20px;
  overflow: auto;
}

.shop_text2 {
  display: initial;
  line-height: 30px;
  font-size: 0.4rem;
  margin-left: 0.4rem;
  padding-top: 25px;
}

.shop_text3 {
  line-height: 30px;
  font-size: 0.35rem;
}

h1 {
  font-size: 0.5rem;
}

h2 {
  font-size: 0.45rem;

}

p {
  font-size: 0.4rem;
}

.img_con {
  width: 6rem;
}
</style>
